<template>
  <div class="top-bar">
    <div class="logo-title">
      <img class="logo" rel="icon" src="../../../../public/vite.svg"  alt=""/>
      <span class="title">安颐智护系统</span>
    </div>
    <div class="menu">
      <el-menu
          :default-active="activeMenu"
          class="el-menu-vertical-demo"
          mode="horizontal"
          @select="handleSelect"
          :popper-offset="10"
          :ellipsis="false"
      >
        <template v-for="route in filteredRoutes" :key="route.path">
        <el-sub-menu v-if="route.children && route.children.length > 0" :index="route.path">
          <template #title>
          <span>{{ route.title }}</span>
          </template>
          <el-menu-item
              v-for="child in route.children"
              :key="child.path"
              :index="route.path + '/' + child.path"
          >
            {{ child.title }}
          </el-menu-item>
        </el-sub-menu>
        <el-menu-item v-else :index="route.path">
          {{ route.title }}
        </el-menu-item>
        </template>
      </el-menu>
    </div>
    <el-tag class="tag" el-check-tag checked>当前页面：{{ nowPageStore().nowPage }}</el-tag>
    <Dropdown />
  </div>

</template>

<script lang="ts">
import { defineComponent, ref, computed } from 'vue';
import {useRoute, useRouter} from 'vue-router';
import { priStore } from '@/store/modules/user';
import Dropdown from "@/views/module/dropdown.vue";
import {nowPageStore, routesStore} from "@/store/modules/routesInfo";
import { menuData } from "@/store/modules/menu";
export default defineComponent({
  name: 'TopMenu',
  methods: {nowPageStore},
  components: {Dropdown},
  setup() {
    const router = useRouter();
    const route = useRoute();
    const activeMenu = ref<string>('/homePage');
    const userRoles = priStore().pri; // 获取用户角色
    // 过滤路由表，生成菜单
    const filteredRoutes = computed(() => {
      const filterRoutes = (menus: any[]) => {
        return menus.filter(menu => {
          if (menu.roles) {
            if (!menu.roles.some((role: string) => userRoles.includes(role))) {
              return false;
            }
          }
          if (menu.children) {
            menu.children = filterRoutes(menu.children);
          }
          return true;
        });
      }
      return filterRoutes(menuData);
    });

    // 处理菜单项选择
    const handleSelect = (key: string) => {
      router.push({ path: "/layout/" + key });
    }


    return {
      activeMenu,
      filteredRoutes,
      handleSelect
    };
  }
});
</script>

<style scoped>
.top-bar {
  width: 100%;
  display: flex;
  background-color: #ef7a82;
  justify-content: space-between;
  align-items: center;
}

.logo-title {
  display: flex;
  width: auto;
  align-items: center;
  white-space: nowrap;
  margin-left: 50px;
}

.menu {
  display: flex;
  margin-left: 100px;
  width: 100%;
}

.el-menu-vertical-demo {
  min-width: 200px;
  --el-menu-bg-color: #ef7a82;
  --el-menu-active-color: #0097ff;
}

.tag{
  position: absolute;
  right: 150px;
  width: 250px;
  height: 40px;
  font-weight: bolder;
  font-size: 20px;
  background-color: #ef7a82;
}
</style>